<template>
  <div>
    <!--查询-->
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="货主名称">
        <el-input
          v-model="Cha.h_cargoname"
          placeholder="请输入货主名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="Cha.h_phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <!--   <el-form-item label="驾驶证有效日期">
        <el-input type="date" v-model="Cha.h_drivingdateend" placeholder="请输入驾驶证有效日期"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="HuoPage()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Huopidelete()">批量删除</el-button>
    <el-button type="danger" @click="HuoAdd()">新增</el-button>
    <el-table ref="huopi" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="货主名称" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.h_cargoname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.h_phone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="单位名称" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.h_unitname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系地址" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.h_site }}</span>
        </template>
      </el-table-column>

      <el-table-column label="驾驶证有效日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.h_drivingdateend
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="驾驶证照片" width="180">
        <template slot-scope="scope">
          <img
            style="left"
            width="70"
            height="70"
            :src="'https://localhost:44311/' + scope.row.h_pictyre"
          />
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.h_remark }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="HuoEint(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="Huodelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="HuoPage"
    />
    <!--货主添加-->
    <el-dialog title="提示" :visible.sync="HuoAddShow" width="30%">
      <el-form ref="form" :model="HuozhuList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="货主名称">
              <el-input v-model="HuozhuList.h_cargoname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="HuozhuList.h_phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称">
              <el-input v-model="HuozhuList.h_unitname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系地址">
              <el-input v-model="HuozhuList.h_site"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驾驶证有效日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="HuozhuList.h_drivingdateend"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="HuozhuList.h_remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驾驶证照片">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                multiple
                :on-success="handleAvatarSuccess2"
                name="fileList"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不能查过500k
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="HuoBao()">保存</el-button>
          <el-button @click="Miss()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--货主编辑-->
    <el-dialog title="提示" :visible.sync="HuoEintShow" width="30%">
      <el-form ref="form" :model="EintTable" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="货主名称">
              <el-input v-model="EintTable.h_cargoname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="EintTable.h_phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称">
              <el-input v-model="EintTable.h_unitname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系地址">
              <el-input v-model="EintTable.h_site"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驾驶证有效日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="EintTable.h_drivingdateend"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="EintTable.h_remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驾驶证照片">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                multiple
                :on-success="handleAvatarSuccess2"
                name="fileList"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击修改</el-button>
              
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不能查过500k
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="Huoxiu()">修改</el-button>
          <el-button @click="Miss()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  HuoPages, //查询
  Huodeletes, //单删
  Huopideletes, //批删
  HuoBaos, //添加
  Huoeints,//反填
  Huoxius,//修改
} from "@/api/system_base/CheliangApi"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {

      uploadUrl:
      process.env.VUE_APP_BASE_API + "services/app/FileManagerService/FilesUpload",
      imageUrl: "",
      addtuname:"",
      
     // imagerUrl2: "",  <img :src="imageUrl2" width="70" height="70" />
      HuoAddShow: false,
      HuoEintShow:false,
      total: 0,
      tableData: [],
      HuozhuList: {
        //添加
        h_cargoname: "",
        h_phone: "",
        h_unitname: "",
        h_site: "",
        h_drivingdateend: "",
        h_pictyre: "",
        h_remark: "",
      },
      Cha: {
        h_cargoname: "",
        h_phone: "",
        // h_drivingdateend:"",
        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
      EintTable:[],
    };
  },
  created() {
    this.HuoPage();
  },
  methods: {
    //修改保存
    Huoxiu(){
      var aa=this.EintTable;
      aa.h_pictyre=this.addtuname;
        if(aa.h_cargoname=="")
      {
        this.$message("货主名称不能空");
        return;
      }
      var phone = /^1[3|4|5|7|8][0-9]{9}$/; 
      if(aa.h_phone==""||!phone.test(aa.h_phone))
      {
        this.$message("手机号不能为空或者手机号格式不正确");
         return;
      }
       if(aa.h_unitname=="")
      {
        this.$message("单位名称不能空");
        return;
      }
       if(aa.h_site=="")
      {
        this.$message("联系地址不能空");
        return;
      }
       if(aa.h_drivingdateend=="")
      {
        this.$message("驾驶证有效日期不能空");
        return;
      }
       if(aa.h_pictyre=="")
      {
        this.$message("驾驶证照片不能空");
        return;
      }
       if(aa.h_remark=="")
      {
        this.$message("备注不能空");
        return;
      }
      Huoxius(aa).then(
        (r)=>{
          this.$message("修改成功");
          this.HuoEintShow=false;
          this.HuoPage();
        }
      )
    },
    //编辑反填
    HuoEint(id) {
      this.HuoEintShow=true;
      Huoeints(id).then(
        (r)=>{
          var that=this;
          that.EintTable=r.result;
        }
      )
    },
    //文件上传
    handleAvatarSuccess2(res, files, fileList) {
      // res.imagerUrl="https://localhost:44311/"+
      res.result.some((f, i) => {
        console.log("res",f)
        var that=this;
        that.addtuname= f.fileNewName
        this.imagerUrl = "https://localhost:44311/" + f.fileNewName;
      });
    },
    //保存
    HuoBao() {
      var aa=this.HuozhuList;
      var that=this;
      aa.h_pictyre=that.addtuname;
      if(this.HuozhuList.h_cargoname=="")
      {
        this.$message("货主名称不能空");
        return;
      }
      var phone = /^1[3|4|5|7|8][0-9]{9}$/; 
      if(this.HuozhuList.h_phone==""||!phone.test(this.HuozhuList.h_phone))
      {
        this.$message("手机号不能为空或者手机号格式不正确");
         return;
      }
       if(this.HuozhuList.h_unitname=="")
      {
        this.$message("单位名称不能空");
        return;
      }
       if(this.HuozhuList.h_site=="")
      {
        this.$message("联系地址不能空");
        return;
      }
       if(this.HuozhuList.h_drivingdateend=="")
      {
        this.$message("驾驶证有效日期不能空");
        return;
      }
       if(aa.h_pictyre=="")
      {
        this.$message("驾驶证照片不能空");
        return;
      }
       if(this.HuozhuList.h_remark=="")
      {
        this.$message("备注不能空");
        return;
      }
      HuoBaos(this.HuozhuList).then((r) => {
        this.$message("添加成功");
        this.HuoAddShow = false;
        this.HuoPage();
      });
    },
    HuoAdd() {
      //打开添加弹出框
      this.HuoAddShow = true;
    },
    //批量删除
    Huopidelete() {
      var arrid = [];
      var id = this.$refs.huopi.selection;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Huopideletes(r).then((r) => {});
          this.$message("批删成功");
          this.HuoPage();
        });
      }
    },
    //查询
    HuoPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      HuoPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    ChaHuoPage() {
      this.Cha.page = 1;
      this.HuoPage();
    },
    
    //单删删除
    Huodelete(id) {
      if (confirm("确认要删除嘛")) {
        Huodeletes(id).then((r) => {
          this.$message("删除成功");
          this.HuoPage();
        });
      }
    },
  },
};
</script>